<template>
	<el-row class="home" :gutter="20">
		<div>
			<el-input v-model="input" placeholder="请输入项目名" class="searchItem"></el-input>
			<el-button type="primary" @click="search">搜索</el-button>
			<div class="demo-input-suffix" style="float: right; margin-right: 70px">
				请选择时间段 ：
				<el-date-picker
					class="itmeTime"
					placeholder="请选择日期"
					suffix-icon="el-icon-date"
					v-model="date.startDate"
				></el-date-picker>
				<i class="el-icon-right"></i>
				<el-date-picker
					class="itmeTime"
					placeholder="请选择日期"
					suffix-icon="el-icon-date"
					v-model="date.endDate"
				></el-date-picker>
			</div>
		</div>

		<el-col style="margin-left: 80px" :span="20">
			<div class="num">
				<el-card class="box-card" v-for="item in countData" :key="item.projectId">
					<div slot="header" :style="{ background: item.state == '已完成' ? '#ACD6FF' : '#66B3FF' }">
						<span class="bianhao">{{ item.projectId }}</span>
						<span style="float: right; margin-right: 13px">
							{{ item.state }}
							<i class="el-icon-loading" v-if="item.state != '已完成'"></i>
						</span>
					</div>
					<div class="text item">
						<span class="title">
							<i class="el-icon-document-copy" style="color: #009100"></i>
							项目名：
							<p class="txt">{{ item.projectName }}</p>
						</span>
						<br />
						<span class="title">
							<i class="el-icon-user" style="color: #009100"></i>
							负责人：
							<p class="txt">{{ item.projectLeader }}</p>
						</span>
						<br />
						<span class="title">
							<i class="el-icon-edit-outline" style="color: #009100"></i>
							项目内容：
							<p class="txt">{{ item.projectInfo }}</p>
						</span>
						<br />
						<span class="title">
							<i class="el-icon-more-outline" style="color: #009100"></i>
							项目成员：
							<p class="txt">{{ traverseMember(item.projectMember) }}</p>
						</span>
						<br />
						<span class="title">
							<i class="el-icon-timer" style="color: #009100"></i>
							起始时间：
							<p class="txt">{{ $moment(item.startTime).format('YYYY-MM-DD') }}</p>
						</span>
						<br />
						<span class="title">
							<i class="el-icon-connection" style="color: #009100"></i>
							结束时间：
							<p class="txt">{{ $moment(item.endTime).format('YYYY-MM-DD') }}</p>
						</span>
						<br />
					</div>
					<div class="cardfoot" style="margin-bottom: 10px">
						<el-button style="float: right; padding: 3px 0" type="text" @click="gotolink">去评分</el-button>
					</div>
				</el-card>
			</div>
		</el-col>
	</el-row>
</template>
<script>
import axios from "axios";

export default {
	name: "projectScore",
	data() {
		return {
			localUrl: 'http://localhost:8888',
			input: "",
			date: {
				startDate: null,
				endDate: null,
			},
			userImg: require("../../src/assets/images/user.png"),
			countData: [],
		};
	},
	methods: {
		gotolink() {
			this.$router.replace("/point");
		},
		traverseMember(arr) {
			let str = ""
			arr.forEach(element => {
				str += element + " ";
			});
			return str;
		},
		search() {
			axios({
				method: 'post',
				url: this.localUrl + '/projectInfo/queryList',
				data: {
					projectName: this.input,
					startTime: this.date.startDate,
					endTime: this.date.endDate,
				}
			}).then((res) => {
				console.log(res)
				this.countData = res.data
			})
		}
	},
	mounted() {
		axios({
			method: 'post',
			url: this.localUrl + '/projectInfo/queryList',
			data: {
				projectName: "",
				startTime: null,
				endTime: null,
			}
		}).then((res) => {
			console.log(res)
			this.countData = res.data
		})
	}
};
</script>

<style lang="less" scoped>
.txt {
	display: inline;
	font-size: 14px;
	color: #8e8e8e;
}
.title {
	font-size: 18px;
	line-height: 30px;
	font-weight: bold;
	color: #003d79;
}
.box-card {
	width: 500px;
}
.el-card /deep/ .el-card__header {
	padding: 0;
	line-height: 50px;
}
.bianhao {
	margin-left: 15px;
	font-weight: bold;
	color: #000;
}
.searchItem {
	width: 200px;
	margin: 15px;
}
.itmeTime {
	width: 200px;
}
</style>

